<script setup lang="ts">
import { ref, Ref } from '@vue/reactivity'
import BoardBgVue from './BoardBg.vue'
import ZiVue from './Zi.vue'
let data: Ref = ref([
  {
    title: '車',
    isRed: false,
    position: [0, 0],
  },
  {
    title: '馬',
    isRed: false,
    position: [0, 1],
  },
  {
    title: '象',
    isRed: false,
    position: [0, 2],
  },
  {
    title: '士',
    isRed: false,
    position: [0, 3],
  },
  {
    title: '將',
    isRed: false,
    position: [0, 4],
  },
  {
    title: '士',
    isRed: false,
    position: [0, 5],
  },
  {
    title: '象',
    isRed: false,
    position: [0, 6],
  },
  {
    title: '馬',
    isRed: false,
    position: [0, 7],
  },
  {
    title: '車',
    isRed: false,
    position: [0, 8],
  },
  {
    title: '炮',
    isRed: false,
    position: [2, 1],
  },
  {
    title: '炮',
    isRed: false,
    position: [2, 7],
  },
  {
    title: '卒',
    isRed: false,
    position: [3, 0],
  },
  {
    title: '卒',
    isRed: false,
    position: [3, 2],
  },
  {
    title: '卒',
    isRed: false,
    position: [3, 4],
  },
  {
    title: '卒',
    isRed: false,
    position: [3, 6],
  },
  {
    title: '卒',
    isRed: false,
    position: [3, 8],
  },
  {
    title: '兵',
    isRed: true,
    position: [6, 0],
  },
  {
    title: '兵',
    isRed: true,
    position: [6, 2],
  },
  {
    title: '兵',
    isRed: true,
    position: [6, 4],
  },
  {
    title: '兵',
    isRed: true,
    position: [6, 6],
  },
  {
    title: '兵',
    isRed: true,
    position: [6, 8],
  },
  {
    title: '炮',
    isRed: true,
    position: [7, 1],
  },
  {
    title: '炮',
    isRed: true,
    position: [7, 7],
  },
  {
    title: '車',
    isRed: true,
    position: [9, 0],
  },
  {
    title: '馬',
    isRed: true,
    position: [9, 1],
  },
  {
    title: '相',
    isRed: true,
    position: [9, 2],
  },
  {
    title: '仕',
    isRed: true,
    position: [9, 3],
  },
  {
    title: '帥',
    isRed: true,
    position: [9, 4],
  },
  {
    title: '仕',
    isRed: true,
    position: [9, 5],
  },
  {
    title: '相',
    isRed: true,
    position: [9, 6],
  },
  {
    title: '馬',
    isRed: true,
    position: [9, 7],
  },
  {
    title: '車',
    isRed: true,
    position: [9, 8],
  },
])
</script>

<template>
  <div class="BoardContainer">
    <div class="Board">
      <BoardBgVue />
      <ZiVue :zi="item" v-for="(item, index) in data" :key="index" />
    </div>
  </div>
</template>
<style scoped>
.BoardContainer {
  position: relative;
  height: 100%;
  width: 100%;
}
.Board {
  position: absolute;
  border: 2px solid #666;
  width: 640px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
</style>
